<script lang="ts" setup>
import History from './components/History.vue'
import Result from './components/Result.vue'
import NavigationBar from './components/NavigationBar.vue'
import type {IProduct} from '@/typings/interface'
import type {LoadMore} from '@/typings/components'
import {getSearchResults} from '@/api/search'
import XLoadMore from '@/components/XLoadMore.vue'

let result = $ref<IProduct[]>([])
const pageInfo = reactive({
    page: 0,
    size: 10,
    title: '',
    isEnd: false,
    status: 'more' as LoadMore
})

// 课程列表数据请求
async function setResults() {
    if (pageInfo.isEnd)
        return
    pageInfo.page++
    pageInfo.status = 'loading'
    const {data} = await getSearchResults(pageInfo)
    result = result.concat(data.current_data)
    pageInfo.status = 'more'
    if (data.current_data.length < pageInfo.size) {
        pageInfo.isEnd = true
        pageInfo.status = 'nomore'
    }
}

// 初始化加载
onLoad((option?: Record<string, string>) => {
    if (!option || !option.content)
        return
    const content = option.content
    pageInfo.title = content
    setResults()
})

onReachBottom(async () => {
    await setResults()
})
</script>

<template>
    <view>
        <NavigationBar/>
        <view px mt>
            <History v-if="!pageInfo.title"/>
            <view v-else>
                <Result :result="result"/>
                <XLoadMore :status="pageInfo.status"/>
            </view>
        </view>
    </view>
</template>
